<template>
  <div class="hotArticle">
    <!-- 热门文章 -->
    <div class="hotTitle">
      <h4 class="text-left">热门文章 TOP5</h4>
    </div>
    <div class="hotContent">
      <div v-for="item in hotArticles" :key="item.id" class="hotArticles">
        <el-row>
          <el-col :span="5" style="margin-right:6px;">
            <img
              style="width: 100%;height: 60px;padding-top:6px;"
              src="http://image.tinx.top/background.jpg"
            />
          </el-col>
          <el-col :span="18">
            <p class="title" v-text="item.title"></p>
            <p class="content" v-text="item.content"></p>
            <p class="baseInfo">
              <i class="el-icon-view" v-text="item.viewCount"></i>
              <i class="el-icon-star-off" v-text="item.starCount"></i>
              <i class="el-icon-s-comment" v-text="item.commentCount"></i>
            </p>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
          hotArticles: [
            {
              id: 1,
              content: '一本很全面的修炼手册丫',
              title: 'Java修炼手册',
              viewCount: 3,
              starCount: 4,
              commentCount: 1
            },
            {
              id: 2,
              content: '一本很全面的修炼手册丫',
              title: 'Java修炼手册',
              viewCount: 3,
              starCount: 4,
              commentCount: 1
            },
            {
              id: 3,
              title: 'Java修炼手册',
              content: '一本很全面的修炼手册丫',
              viewCount: 3,
              starCount: 4,
              commentCount: 1
            },
            {
              id: 4,
              title: 'Java修炼手册',
              content: '一本很全面的修炼手册丫',
              viewCount: 3,
              starCount: 4,
              commentCount: 1
            },
            {
              id: 5,
              title: 'Java修炼手册',
              content: '一本很全面的修炼手册丫',
              viewCount: 3,
              starCount: 4,
              commentCount: 1
            }
          ]
            
        }
    },
}
</script>

<style lang="less" scoped>
.hotArticle {
  .hotTitle {
    // border-bottom: 1px dash #f6f6f6;
    padding: 10px;
    border-left: 5px solid #409eff;
    // border-bottom: 1px solid #c0c0c0;
    .title {
    }
  }
  text-align: left;
  h4 {
    margin: 0 0 5px 0;
  }
  .hotArticles:first-child {
    border-top: 1px solid #f6f6f6;
  }
  @keyframes hoverAnimate {
    from {
      background: #ffffff;
    }
    to {
      background: skyblue;
    }
  }
  .hotArticles:hover {
    cursor: pointer;
    animation: hoverAnimate 1s infinite;
    animation-direction: alternate;
  }
  .hotArticles {
    margin-top: 5px;
    height: 66px;
    padding: 5px;
    border-bottom: 1px solid #c0c0c0;
    position: relative;
    .title,
    .baseInfo {
      padding: 0;
      margin: 0;
      // height: 52px;
    }
    .baseInfo {
      font-size: 12px;
      position: absolute;
      bottom: 0px;
    }
    .content {
      margin: 0;
      font-size: 14px;
    }
  }
}
</style>
